<template>
  <page-meta :root-font-size="fontsize" style="display: block">
    <div class="integralRechargePage">
      <xlNavBar :isShare="isShare" title="积分充值" :isMark="false" bgc="transparent"></xlNavBar>
      <div class="top">
        <image v-if="isFirst" src="/pages3/static/jfczxyh.png" mode="scaleToFill" />
        <image v-else src="/pages3/static/jfcz.png" mode="scaleToFill" />
      </div>
      <div class="container">
        <div class="title">积分充值</div>
        <div class="s_wrap">
          <div class="item" @click="clickItem(item, index)" :class="[active == index ? 'active' : '']" v-for="(item, index) in list" :key="item">
            <div class="scwzyh" v-if="item.is_first">首冲5折优惠</div>
            <div class="scwzyh" v-else>{{ listTag[index] }}</div>
            <image v-if="active == index" class="xz" src="@/pages3/static/xz.png" mode="scaleToFill" />
            <div class="t1">{{ item.integral || 0 }}积分</div>
            <div class="t2">
              <text class="n">{{ item.is_first ? item.first_by_price : item.price }}</text>
              <text class="tt">元</text>
            </div>
            <div class="t3" v-if="item.is_first">{{ item.price || 0 }}元</div>
            <div class="t4">每积分{{ item.integral_by_price }}元</div>
          </div>
        </div>
        <div class="d_c">
          <div>充值说明</div>
          <div>积分全平台通用，永不过期</div>
          <div>如遇到问题，可联系客服反馈</div>
        </div>
        <div class="footer" :class="[$isIos() == 'IOS' ? 'ios' : '']">
          <div class="btn" @click="setOrderInfo">确认支付{{ selectRecharge.is_first ? selectRecharge.first_by_price : selectRecharge.price }}元</div>
          <div class="xy" @click="$togo('/pages3/userAgreement', { type: 'yhczxy' })">
            <text>充值即代表同意</text>
            <text class="xy_text">《用户充值协议》</text>
          </div>
        </div>
      </div>
    </div>
    <RechargeSuccess :show="showRechargeSuccess" :integral="selectRecharge.integral"></RechargeSuccess>
  </page-meta>
</template>

<script>
import { mapActions } from "vuex";
import RechargeSuccess from "./compontents/RechargeSuccess.vue";
export default {
  name: "integralRechargePage",
  components: { RechargeSuccess },
  data() {
    return {
      fontsize: "",
      active: 0,
      isShare: 0,
      isFirst: true,
      showIosPopup: false,
      list: [],
      listTag: ["小试牛刀", "短线优惠", "52%用户选择", "32%用户选择", "性价比推荐", "长期超划算", "超值推荐", "积分更优惠", "大客户专享价", "大客户专享价"],
      selectRecharge: null,
      orderInfo: null,
      showRechargeSuccess: false,
    };
  },
  async onShow() {
    await this.getData();
  },
  methods: {
    ...mapActions("user", ["setUserInfo"]),
    clickItem(item, index) {
      this.selectRecharge = item;
      this.active = index;
    },
    async getData() {
      let res = await this.$http.requestSync("/bills/get_pay_conf");
      if (res.code == 200) {
        this.list = res.pay_conf;
        this.isFirst = res.pay_conf[0].is_first;
        this.selectRecharge = res.pay_conf[0];
        console.log(76, this.selectRecharge);
      }
    },
    async getIntegral() {
      let res = await this.$http.requestSync("/bills/get");
    },
    //创建订单
    async setOrderInfo() {
      let params = {
        price: this.selectRecharge.is_first ? this.selectRecharge.original_price : this.selectRecharge.price,
        // price: 0.01,
        integral: this.selectRecharge.integral,
      };
      let res = await this.$http.requestSync("/bills/wxpay", params);
      if (res.code == 200) {
        this.orderInfo = res;
        uni.requestPayment({
          // provider: "weixin",
          provider: "wxpay",
          orderInfo: res.orderInfo,
          timeStamp: res.timeStamp,
          nonceStr: res.nonceStr,
          package: res.package,
          signType: res.signType,
          paySign: res.paySign,
          success: async () => {
            uni.showLoading({
              title: "正在为您充值...",
              mask: true,
            });
            await this.setUserInfo();
            setTimeout(() => {
              uni.hideLoading(); //隐藏加载动画
              this.showRechargeSuccess = true;
            }, 1000);
          },
          fail: err => {
            console.log(err);
          },
        });
      }
    },
  },
  onLoad(options) {
    if (options.params) {
      let params = JSON.parse(decodeURIComponent(options.params));
      if (params.shareUserId) {
        this.$setStoraged("shareUserId", params.shareUserId);
        this.isShare = 1;
      }
    }
    let designWidth = 37.5; //因设计图的宽度
    let that = this;
    //窗体改变大小触发事件
    uni.onWindowResize(res => {
      console.log("变化后的窗口宽度=", res.size.windowWidth);
      //100*屏幕宽度/设计稿宽度
      that.fontsize = Math.floor((1.5 * res.size.windowWidth) / designWidth) + "px";
      console.log("字体大小：", that.fontsize);
    });

    //打开获取屏幕大小
    uni.getSystemInfo({
      success(res) {
        console.log("设备信息：", res);
        that.fontsize = Math.floor((1.5 * res.screenWidth) / designWidth) + "px";
        console.log("字体大小：", that.fontsize);
      },
    });
  },
};
</script>

<style lang="scss" scoped>
.integralRechargePage {
  .top {
    width: 100%;
    height: 166px;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .title {
    font-size: 14px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    margin: 20px auto 10px;
  }
  .s_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      width: 108px;
      height: 123px;
      background: #f7f7f7;
      border-radius: 5px 5px 5px 5px;
      text-align: center;
      display: table;
      position: relative;
      margin-bottom: 17px;
      .scwzyh {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 70px;
        height: 22px;
        position: absolute;
        background: linear-gradient(270deg, #7c6b52 0%, #503b22 100%);
        border-radius: 5px 5px 5px 2px;
        font-weight: 600;
        color: #ffdfaf;
        font-size: 10px;
        left: 0px;
        top: -7px;
      }
      .xz {
        position: absolute;
        right: 0;
        top: 0;
        width: 22px;
        height: 22px;
      }
      .t1 {
        height: 18px;
        font-size: 18px;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
        margin: 27px auto 10px;
      }
      .t2 {
        .n {
          font-size: 22px;
          font-family: Arial Black-Regular, Arial Black;
          font-weight: 900;
          color: #794b04;
        }
        .tt {
          font-size: 10px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #794b04;
        }
      }
      .t3 {
        transform: rotate(0.8);
        font-size: 10px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        text-decoration: line-through;
      }
      .t4 {
        transform: rotate(0.8);
        width: 86px;
        height: 18px;
        background: #f6d6ad;
        border-radius: 2px 2px 2px 2px;
        line-height: 18px;
        font-size: 10px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #c58a2f;
        margin: 5px auto;
      }
    }
  }
  .d_c {
    margin-bottom: 80px;
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
  .footer {
    position: fixed;
    bottom: 0;
    width: calc(100% - 30px);
    background: #fff;
    box-sizing: border-box;
    padding-bottom: 10px;
    .btn {
      height: 46px;
      line-height: 46px;
      background: linear-gradient(270deg, #ffa222 0%, #ff8822 100%);
      border-radius: 23px 23px 23px 23px;
      font-size: 18px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      text-align: center;
      margin: 12px auto;
    }
    .xy {
      width: 100%;
      height: 16px;
      font-size: 12px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 16px;
      text-align: center;
      .xy_text {
        color: #ffa222;
      }
    }
  }
  .active {
    background: linear-gradient(180deg, #fff2e1 0%, #fce2c5 100%) !important;
  }
}
</style>
